制作github贪吃蛇贡献图


||

如图所示，非常有趣：）

xingwangzhe/xingwangzhe: My personal repository

你可以查看我的主页仓库来看具体效果：）

创建workflow

在你的主页目录下建立

.github/workflows/snake.yml

2024-11-11-092848

接下来你需要复制我仓库中的snake.yml中的代码，方便起见，我直接贴在下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
name: Generate snake animation

on:
  schedule:
    - cron: "0 0 * * *" # run daily at mignight UTC

  workflow_dispatch:

  push:
    branches:
    - main

jobs:
  generate:
    permissions:
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
    - name: generate snake.svg
      uses: Platane/snk@v3
      with:
        # github user name to read the contribution graph from (**required**)
        # using action context var `github.repository_owner` or specified user
        github_user_name: ${{ github.repository_owner }}

        # list of files to generate.
        # one file per line. Each output can be customized with options as query string.
        #
        #  supported options:
        #  - palette:     A preset of color, one of [github, github-dark, github-light]
        #  - color_snake: Color of the snake
        #  - color_dots:  Coma separated list of dots color.
        #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
        #                 Exactly 5 colors are expected.
        outputs: |
          dist/github-snake.svg
          dist/github-snake-dark.svg?palette=github-dark
          dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

    - name: Deploy to GitHub Pages
      uses: crazy-max/ghaction-github-pages@v4
      with:
        target_branch: output
        build_dir: dist
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

然后点击上部导航栏的Actions查看snake.yml的状态，创建完毕后，会出现新的分支output。打开这个分支

2024-11-11-093349

你就会发现贪吃蛇的图了

引用使用

你需要把下面的路径中的xingwangzhe换成自己的github用户名

1
2
3
4
5
6
<!-- snake -->
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/xingwangzhe/xingwangzhe/blob/output/github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="https://github.com/xingwangzhe/xingwangzhe/blob/output/github-snake.svg" />
  <img alt="github-snake" src="github-snake.svg" />
</picture>

于是乎，大功告成！

参考

【教程】我在GitHub个人主页玩贪吃蛇_哔哩哔哩_bilibili

a u t h o r

姓王者

p u b l i c

2024/11/11 09:19:33 CST

L I C E N S E